<template>
  <view class="detail">
    <nav-bar title="巡查巡检" leftArrow></nav-bar>
    <view class="universal-head">
      <view class="universal-head-title">{{ detail.lineName }}</view>
      <view class="universal-status" :class="detail.dangerFlag?.value === '0' ? 'universal-status-success' : 'universal-status-warning'">{{detail.dangerFlag?.label || ''}}</view>
    </view>
    <view class="universal-detail">
      <view class="universal-detail-cont">
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">线路类别：</view>
          <view class="universal-detail-item-cont">{{ detail.lineLabel || '-' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">巡查次数：</view>
          <view class="universal-detail-item-cont">{{ list.length || 0 }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">所属工程：</view>
          <view class="universal-detail-item-cont">{{ detail.projectItems || '-' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">点位数：</view>
          <view class="universal-detail-item-cont">{{ detail.pointCount || 0 }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">完成时间：</view>
          <view class="universal-detail-item-cont">{{ detail.endTime || '-' }}</view>
        </view>
      </view>
    </view>
    <view class="detail-map">
      <map-patrol :polyline="checkList"></map-patrol>
    </view>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="universal-list-list"
      >
        <van-cell v-for="item in list" :key="item">
          <view class="universal-list-item" @click="goLink(item)">
            <view class="universal-list-head">
              <view class="universal-list-title">
                {{ item.checkName }}
                <text class="universal-list-title-tag">
                  {{item.patrolStatusStr || ''}}
                </text>
              </view>
              <view v-if="item.dangerFlag" class="universal-list-status">
                <van-tag v-if="item.patrolStatus === '1'" type="warning">继续巡查</van-tag>
                <van-tag v-else :type="item.dangerFlag.value === '0' ? 'success' : 'warning'">{{ item.dangerFlag.label }}</van-tag>
              </view>
            </view>
            <view class="universal-list-main">
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">巡查人员：</view>
                <view class="universal-detail-item-cont">{{ item.checkerName || '-' }}</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">开始时间：</view>
                <view class="universal-detail-item-cont">{{ item.startTime || '-' }}</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">结束时间：</view>
                <view class="universal-detail-item-cont">{{ item.endTime || '-' }}</view>
              </view>
            </view>
            <view class="universal-list-footer">
              <view class="universal-list-footer-button">
                详情<van-icon name="arrow" />
              </view>
            </view>
          </view>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </view>
</template>

<script setup>
  import dayjs from 'dayjs';
  import { ref, onMounted, computed } from 'vue';
  import { mapState } from 'vuex';
  import { apiPatrolTaskCountByDate, apiPatrolLineDetail } from '@/api/patrolInspect';
  import store from '@/store'
  const detail = ref({});
  const path = defineProps({
    id: String,
    date: String,
  })

  const list = ref([]);
  const checkList = ref([]);
  const refreshing = ref(false);
  const loading = ref(false);
  const finished = ref(false);

  const onLoad = () => {
    getPatrolLineCountItem();
  };
  const onRefresh = () => { 
    onLoad();
  };

  const goLink = (options) => {
    uni.navigateTo({ url: `/pages/patrolInspect/detail?id=${options.taskId}&lineId=${path.id}` })
  };

  const getPatrolLineCountItem = () => {
    apiPatrolTaskCountByDate({
      lineId:path.id,
      occDate: path.date
    }).then(res => {
      list.value = res;
      finished.value = true;
    })
  };
  const getPatrolLineDetail = () => {
    apiPatrolLineDetail({
      value: path.id
    }).then(res => {
      checkList.value = res.planVOS;
    });
  }
  getPatrolLineDetail();
  onMounted(() => {
    detail.value = uni.getStorageSync("PATROL_LINE_DETAIL");
  });
</script>

<style lang="scss" scoped>
@import '@/assets/universal-page.scss';
@import '@/assets/universal-detail.scss';
@import '@/assets/universal-list.scss';

.detail {
  .detail-map {
    margin: 0 20rpx 30rpx;
    height: 600rpx;
    border-radius: 20rpx;
  }
  .universal-detail {
    .universal-detail-item {
      min-width: 90%;
    }
  }
  .universal-list-detail {
    min-width: 90%;
  }
}
</style>